<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import type { TableColumnData } from '@arco-design/web-vue'

import { useClassStudents } from '@/apis/class'
import type { UserProfile } from '@/apis/user'
import { tableProps } from '@/constants/component-props'
import type { TableSlotCell } from '@/types/components-tool'
import { useStudentPatch } from './composables/useStudentPatch'

import StudentDrawerTable from './StudentDrawerTable.vue'

const route = useRoute()
const classID = computed(() => +route.params.classID)
const { data } = useClassStudents(classID)
const { visible, toggle, isPending, selectedStudents, patchStudents, removeStudent } =
  useStudentPatch(classID)

const columns = [
  {
    dataIndex: 'username',
    title: '学号',
    align: 'center'
  },
  {
    dataIndex: 'name',
    title: '姓名',
    align: 'center'
  },
  {
    align: 'center',
    slotName: 'remove',
    title: '移除学生'
  }
] as const satisfies TableColumnData[]
</script>

<template>
  <section class="card px-0">
    <header class="flex justify-between px-xs mb-xs">
      <h3 class="card-title"><i class="i-fluent-people-error-16-filled text-lg" />学生信息</h3>
      <a-button-group size="mini" type="dashed">
        <a-button disabled>🚧 继承班级</a-button>
        <a-button @click="toggle(true)">添加学生</a-button>
      </a-button-group>
    </header>

    <a-drawer
      width="min(100vw, 600px)"
      :header="false"
      placement="left"
      :visible
      @beforeOpen="selectedStudents.splice(0, selectedStudents.length)"
      @ok="patchStudents('add')"
      @cancel="() => !isPending && toggle(false)"
    >
      <StudentDrawerTable v-model="selectedStudents" />
    </a-drawer>

    <a-table v-bind="tableProps" :data :columns>
      <template #th><th class="arco-table-thead" /></template>
      <template #remove="{ record: { username } }: TableSlotCell<UserProfile>">
        <a-popconfirm
          :content="`确定移除该学生吗(${username})?`"
          @ok="removeStudent(username)"
          type="error"
        >
          <a-button size="mini" status="danger" type="secondary">
            <template #icon><i class="i-fluent-person-delete-24-filled" /></template>
          </a-button>
        </a-popconfirm>
      </template>
    </a-table>
  </section>
</template>
